<template>
    <div>
        <el-container>
            <el-header class="homeHeader">
                <h3>南声 CMS 后台管理系统</h3>
                <el-dropdown @command="userOperation">
                    <span class="el-dropdown-link">
                        {{loginer.username}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="userSettings">个人中心</el-dropdown-item>
                        <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu unique-opened router>
                        <!-- 有子选项 -->
                        <el-submenu :key="'sub'+index" :index="'sub'+index" v-for="(item,index) in this.$router.options.routes" v-if="!item.hidden && item.meta.hasChild">
                            <template slot="title">
                                <i :class="item.meta.icon"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item :key="child.path" :index="child.path" v-for="child in item.children">
                                <span slot="title">{{child.meta.title}}</span>
                            </el-menu-item>
                        </el-submenu>
                        <!-- 没有子选项 -->
                        <div :key="'nosub'+index" v-for="(item,index) in this.$router.options.routes">
                            <div v-if="!item.hidden && !item.meta.hasChild">
                                <el-menu-item :key="child.path" :index="child.path" v-for="child in item.children">
                                    <i :class="child.meta.icon"></i>
                                    <span slot="title">{{child.meta.title}}</span>
                                </el-menu-item>
                            </div>
                        </div>
                    </el-menu>
                </el-aside>
                <el-main>
                    <el-breadcrumb separator-class="el-icon-arrow-right"  v-if="this.$route.path != '/Home'">
                        <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>{{this.$route.meta.title}}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <h2 v-else class="welcomeInfo">欢迎使用南声CMS后台管理系统</h2>
                    <router-view style="margin-top: 10px"></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
            return {
                loginer : JSON.parse(window.sessionStorage.getItem('loginer'))
            }
        },
        methods : {
            userOperation(command){ // 点击菜单项回调
                if(command == 'userSettings'){
                    alert('个人中心');
                }else if(command == 'logout'){
                    this.$confirm('此操作退出登录, 是否继续?', '退出', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$getRequest('/logout').then(resp => {
                            if (resp) {
                                window.sessionStorage.removeItem('loginer');
                                this.$router.replace('/');
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });
                    });
                }
            }
        }
    }
</script>

<style scoped>
    .homeHeader {
        background-color: #409eff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .homeHeader h3 {
        color: #fff;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #fff;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    .fa{
        margin-right: 20px;
    }

    .welcomeInfo{
        color: #409eff;
        text-align: center;
        font-family: '楷体';
        letter-spacing: 5px;
    }
</style>